<template>
  <div id="detail" class="componentBox">
    <div  v-for="item in newsDetailList" :key="item.id">
      <!-- 标题 -->
      <h3 v-text="item.title" class="title"></h3>
      
      <!-- 发布时间 + 点击次数 -->
      <div class="time-info">
        <!-- 我开始直接用substr 包有渲染错误的红色错误警告 -->
        <span v-cloak>发表时间：{{item.add_time.substr(0, 10)}}</span>
        <span v-cloak>点击次数：{{item.click}}</span>
      </div>

      <!-- 具体内容 -->
      <div class="main" v-html="item.content"></div>

      <!-- 引入评论组件 -->
      <my-comments></my-comments>

    </div>
  </div>
</template>

<script>
import Comment from '../comment.vue'
export default {
  data () {
    return {
      // 新闻资讯 详情数据
      newsDetailList: []
    }
  },
  created () {
    this.getNewsDetail()
  },
  methods: {
    async getNewsDetail () {
      // 获取资讯的ID
      // console.log(this.$route.params.id);
      const { data: res } = await this.$http.get('/api/getnew/' + this.$route.query.id)
      // console.log(res)
      // 获取数据成功
      if (res.status === 1) return this.$notify({ type: 'danger', message: '获取新闻资讯数据失败' })
      // 获取数据成功
      this.newsDetailList = res.message
      // console.log(this.newsDetailList)
    }
  },
  components: {
    'my-comments': Comment
  }
}
</script>

<style lang="less" scoped>
#detail {
 padding: 0 10px;
}
// 标题样式
.title {
  color: #1989fa;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  padding: 5px 0;
}
// 发布时间 + 点击次数
.time-info {
  display: flex;  /*弹性盒子*/
  // flex-flow: row nowrap;  /*子元素溢出父容器时换行*/
  justify-content: space-between;  /*两端对齐，子元素之间有间隙*/
  border-bottom: 1px solid #ccc;
  padding: 7px 0;
  font-size: 13px;
  color: #1989fa;
}

// 具体内容样式
.main {
  font-size: 14px;
  p {
    color: #535353;
  }
  b {
    font-weight: bold;
  }
}
.kong{
  height: 1.06667rem;
}
</style>
